<template>
  <div class="picture-container">
    <template v-for="item in pictures">
      <el-image
        class="my-el-image"
        :src="item.url"
        :preview-src-list="[item.url]"
        fit="cover"
      ></el-image>
    </template>
    <i></i>
    <i></i>
    <i></i>
  </div>
  <div class="pagination" v-if="count > 20">
    <el-pagination
      v-model:currentPage="currentIndex"
      :page-size="limit"
      :page-sizes="[20, 40, 60]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { getImages } from "@/service/file";
const pictures = ref();
const currentIndex = ref(1);
const limit = ref(20);
const count = ref(0);

const handleSizeChange = (l: number) => {
  limit.value = l;
  currentIndex.value = 1;
  getP();
};
const handleCurrentChange = (l: number) => {
  getP();
};
// watch(
//   () => document.documentElement.clientWidth,
//   () => {
//     console.log("宽度改变了");
//   }
// );
const getP = async () => {
  const res: any = await getImages(
    (currentIndex.value - 1) * limit.value,
    limit.value
  );
  pictures.value = res.data.images;

  console.log(res.data);

  count.value = res.data.count;
};
onMounted(() => {
  getP();
});
</script>

<style scoped lang="less">
.picture-container {
  position: fixed;
  left: 0;
  top: 65px;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  min-width: 100vw;
  padding: 0 10px;
  overflow-y: scroll;
  align-content: start;
  > i {
    display: inline-block;
    width: 18%;
  }
  .my-el-image {
    width: 20% !important;
    max-height: 200px;
    margin: 10px 0;
  }
}
.pagination {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  :deep(.el-pagination) {
    margin: auto;
    opacity: 0.8;
    max-width: 100vw;
    // flex-direction: column;
    &:hover {
      opacity: 1;
      background-color: #fff;
    }
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  }
}
</style>
